<template>
  <view class="wrapper">
    <u-modal
      v-model="showModal"
      title="请选择打印联"
      show-confirm-button
      show-cancel-button
      :title-style="{
        fontWeight: 'bold'
      }"
      @confirm="confirmPrint"
    >
      <view class="print-list">
        <view class="print-item" v-for="(item, index) in printList" :key="index">
          <view class="item-radio" @click="handlePrintCheck(item.value)">
            <u-checkbox :modelValue="inArray(item.value, printCheckedIds)" :activeColor="appTheme.mainBg" />
          </view>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </u-modal>
  </view>
</template>
<script>

import { inArray } from "@/utils/util"

export default {
  name: "index",
  data() {
    return {
      inArray,
      showModal: false,
      printList: [
        { name: '商家联', value: 1 },
        { name: '拣货联', value: 2 },
        { name: '顾客联', value: 3 }
      ],
      printCheckedIds: [1, 2, 3]
    }
  },
  methods: {
    show() {
      this.showModal = true
    },
    confirmPrint() {
      this.$emit('confirm', this.printCheckedIds)
    },
    // 打印联选中事件
    handlePrintCheck(value) {
      const { printCheckedIds } = this
      const index = printCheckedIds.findIndex(id => id === value)
      if (printCheckedIds.length === 1 && index > -1) return this.$toast('至少保留一项！')
      index < 0 ? printCheckedIds.push(value) : printCheckedIds.splice(index, 1)
    },
  }
}
</script>

<style scoped lang="scss">
.wrapper {

  .print-list {
    padding: 40rpx 20rpx;
    display: flex;
    justify-content: space-around;

    .print-item {
      display: flex;
      align-items: center;
      font-size: 28rpx;

      .item-radio {
        width: 50rpx;
      }
    }
  }
}
</style>
